<template>
  <div class="login-container">
    <el-form :model="loginForm" :rules="rules" ref="loginForm" class="login-box" label-width="70px"
             status-icon :hide-requied-aterisk="false">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="loginForm.username"/>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="loginForm.password" show-password/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('loginForm')">登录</el-button>
        <el-button @click="resetForm('loginForm')">重置</el-button>
      </el-form-item>
      <el-form-item>
        <el-button @click="otherLogin">other login</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      loginForm: {
        username: "zhangsan",
        password: "password"
      },
      rules: {
        username: [
          {required: true, message: '请输入', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入', trigger: 'change'},
          {min: 8, max: 16, message: '长度在 8 到 16 个字符', trigger: 'blur'}
        ]
      }
    };
  },
  methods: {
    submitForm(formName) { // 登录
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          await this.$store.dispatch("login", this.loginForm);
          // 跳转到未登录之前要访问的路由，若有的话。否则跳转到 /home 路由
          let toPath = this.$route.query.redirect || "/home";
          this.$router.push(toPath);
          this.$message({message: '登录成功！', type: 'success', duration: 1000});
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    otherLogin() {
      const url = 'http://127.0.0.1:8080/oauth2/authorization/messaging-client-oidc';
      const target = 'otherLoginWindow';
      const iWidth = 450; // 弹出窗口的宽度;
      const iHeight = 400 // 弹出窗口的高度;
      const iTop = (window.screen.height - 30 - iHeight) / 2; // 获得窗口的垂直位置;
      const iLeft = (window.screen.width - 10 - iWidth) / 2; // 获得窗口的水平位置;
      const features = 'height=' + iHeight + ',width=' + iWidth + ',top=' + iTop + ',left=' + iLeft;
      const loginWindow = window.open(url, target, features);
      // loginWindow.close();
    }
  }
};
</script>

<style>
.login-container {
  display: flex;
  display: -webkit-flex;
  align-items: center; /* 垂直居中，针对 login-container 下面的子元素，不包含'孙子'元素 */
  justify-content: center; /* 水平居中，针对 login-container 下面的子元素，不包含'孙子'元素 */
  height: 100vh; /* 相对于视口的高度 */
}

.login-box {
  width: 350px;
  height: 150px;
}
</style>
